import { Directive } from 'vue'

// 提交验证
const clickOutsideDirective: Directive = {
  // 初始化指令
  mounted(el, binding) {
    function clickHandler(e: MouseEvent) {
      // 这里判断点击的元素是否是本身，是本身，则返回
      if (el.contains(e.target as Node)) {
        return false
      }
      // 判断指令中是否绑定了函数
      if (binding.value) {
        // 如果绑定了函数，则调用那个函数，此处binding.value就是handleClose方法
        binding.value(e)
      }
    }
    // 给当前元素绑定个私有变量，方便在beforeUnmount中可以解除事件监听
    el.__vueClickOutside__ = clickHandler
    document.addEventListener('click', clickHandler)
  },
  // 卸载时解除事件监听
  beforeUnmount(el) {
    document.removeEventListener('click', el.__vueClickOutside__)
    delete el.__vueClickOutside__
  }
}

export default clickOutsideDirective

// 在使用指令的组件中：
// import clickOutsideDirective from './clickOutsideDirective';

// 使用方法：
// <div v-click-outside="isShowAgree"></div>
